<template>
	<view class="content">
		<nav-bar leftIcon="left"></nav-bar>
		<view class="main">
			<!-- 			<image src="../../assets/login/loginIcon.png" class="imgIcon"></image>
			<view class="welcome">
				{{$t('歡迎您來到流量方舟')}}
			</view>
			<view class="text">
				{{$t('請輸入郵箱號新密碼進行密碼重置')}}
			</view> -->
			<view style="font-size: 21px;line-height: 9px;color: #FFFFFF;" class="welcome">
				{{ $t('忘記密碼') }}
			</view>
			<view style="margin-top: 24px;" class="text">
				{{ $t('請輸入郵箱號或手機號，新密碼進行密碼重置') }}
			</view>
			<view class="contentList">
				<h-input v-if="cutNum" :name="$t('郵箱號')" @myInp="changeMailbox">
					<template v-slot:right>
						<view @click="changeCutNum(false)" style="color:#636897 ; float: right;font-size: 26rpx;"
							class="cut">
							{{ $t('切換手機號') }}
						</view>
					</template>
				</h-input>
				<h-input v-else iptType="number" :name="$t('手機號')" @myInp="changePhone">
					<template v-slot:right>
						<view @click="changeCutNum(true)" style="color:#636897 ; float: right;font-size: 26rpx;"
							class="cut">
							{{ $t('切換郵箱號') }}
						</view>
					</template>
				</h-input>
				<h-input :name="$t('獲取驗證碼')" @myInp="changeVerifyCode">
					<template v-slot:right>
						<view @click="throttle2GetAuthCode" v-if="isGetCode" class="codeText">
							{{ $t('獲取驗證碼') }}
						</view>
						<view v-else class="codeText">{{ countDownNum }}</view>
					</template>
				</h-input>
				<h-input :iptType='isShow' :name="$t('新密碼')" @myInp="changePassWord">
					<template v-slot:right>
						<image @click="cutType('password')" src="../../assets/login/zy.png" v-if="isShow === 'text'"
							class="inpIcon">
						</image>
						<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
					</template>
				</h-input>
				<h-input :iptType='isShow' :name="$t('確認密碼')" @myInp="changeagainPassWord">
					<template v-slot:right>
						<image @click="cutType('password')" src="../../assets/login/zy.png" v-if="isShow === 'text'"
							class="inpIcon">
						</image>
						<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
					</template>
				</h-input>
			</view>
			<view class="btn-sub" @click="login">
				{{ $t('確認') }}
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	onMounted,
	ref,
	reactive
} from 'vue'
import HInput from '@/components/h-input.vue'
import loginRequest from '@/hooks/login.js'
import i18n from '@/locale/index'
import {
	ShowToast,
	throttle2
} from '@/utils/check.js'
const {
	resetPassWord,
	getVerificationCode,
	getPhoneCode
} = loginRequest()
let countDownNum = ref(0) //倒计时数字
let isGetCode = ref(true) //是否已经获取验证码
let isShow = ref('password')
const cutNum = ref(true)
const FormDate = ref({
	mailbox: '',
	phone: '',
	verifyCode: '',
	passWord: '',
	againpassWord: ''
})

function changeMailbox(val) {
	FormDate.value.mailbox = val
}
//手机号
function changePhone(val) {
	FormDate.value.phone = val
}

function changeVerifyCode(val) {
	FormDate.value.verifyCode = val
}

function changePassWord(val) {
	FormDate.value.passWord = val
}

function changeagainPassWord(val) {
	FormDate.value.againpassWord = val
}

let a = true
// 获取验证码 
const throttle2GetAuthCode = async () => {
	if (cutNum.value) {
		if (!FormDate.value.mailbox) return ShowToast(`${i18n.global.t('請填寫郵箱')}`)
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

		function endsWithEmail(str) {
			return emailRegex.test(str);
		}
		if (!endsWithEmail(FormDate.value.mailbox)) return ShowToast(`${i18n.global.t('請輸入正確的郵箱格式!')}`)
	} else {
		if (!FormDate.value.phone) {
			return uni.showToast({
				title: `${i18n.global.t('請填寫手機號')}`,
				icon: 'none',
			})
		}
	}
	if (a) {
		a = false
		isGetCode.value = false
		countDownNum.value = 60
		let timer = setInterval(() => {
			countDownNum.value--
			if (countDownNum.value === 0) {
				clearInterval(timer)
				isGetCode.value = true
			}
		}, 1000)		
		if (cutNum.value) {
			setTimeout(() => {
				a = true
			}, 5000)
			const res = await getVerificationCode('user/sendVerificationCode', {
				email: FormDate.value.mailbox,
				checksType: 0
			})
		} else {
			setTimeout(() => {
				a = true
			}, 5000)
			await getPhoneCode('user/sendPhoneVerificationCode', {
				phone: FormDate.value.phone,
				checksType: 0
			})
		}

		uni.showToast({
			title: `${i18n.global.t('發送成功')}`,
			icon: 'none',
		})
	}

}


//修改input密码状态
function cutType(val) {
	isShow.value = val
}
const login = async () => {


	if (cutNum.value) {

		if (!FormDate.value.mailbox || !FormDate.value.verifyCode || !FormDate.value.passWord || !FormDate
			.value
			.againpassWord) return ShowToast(`${i18n.global.t('請完善信息')}`)
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

		function endsWithEmail(str) {
			return emailRegex.test(str);
		}
		if (!endsWithEmail(FormDate.value.mailbox)) return ShowToast(`${i18n.global.t('請輸入正確的郵箱格式!')}`)
	} else {
		if (!FormDate.value.phone || !FormDate.value.verifyCode || !FormDate.value.passWord || !FormDate.value
			.againpassWord) {
			return uni.showToast({
				title: `${i18n.global.t('請完善信息')}`,
				icon: 'none',
			})
		}
	}
	if (FormDate.value.passWord !== FormDate.value.againpassWord) return ShowToast(`${i18n.global.t('密碼不一致')}`)
	await resetPassWord('user/resetPassWord', {
		...FormDate.value,
		registrationType: cutNum.value ? 0 : 1
	})
	uni.showToast({
		title: `${i18n.global.t('修改成功')}`,
		icon: 'none',
	})
	uni.redirectTo({
		url: "/pages/login/login"
	})
}

function changeCutNum(val) {
	cutNum.value = val
	FormDate.value.mailbox = ''
	FormDate.value.phone = ''
}
</script>

<style lang="scss" scoped>
.codeText {
	width: 150rpx;
	height: 27rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #636897;
	line-height: 27rpx;
	text-align: right;
}

.leftRightBtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.leftBtn {
	color: #FFFFFF;
	font-size: 24rpx;
	line-height: 125rpx;
}

.inpIconFlex {
	display: flex;
	align-items: center;
}

.num {
	font-size: 28rpx;
	color: #A99DFA;
	position: absolute;
	right: 80rpx;
}

.inpIcon {
	display: block;
	width: 28rpx;
	height: 28rpx;
}

.inp {
	border: 2rpx solid #636897;
	border-radius: 10rpx;
	padding: 28rpx 27rpx 25rpx;
	font-size: 28rpx;
	color: #FFFFFF;
	display: block;
	width: 100%;
	line-height: 28rpx;
}

.inpFousc {
	border: 2rpx solid red;
	border-radius: 10rpx;
	padding: 32rpx;
	font-size: 28rpx;
	color: #FFFFFF;
	display: block;
	width: 100%;
}

.inputName {
	font-size: 24rpx;
	color: #808492;
	line-height: 80rpx;
}

.main {
	padding: 25rpx;
	margin-top: 100rpx;
	width: 100%;
	box-sizing: border-box;


	.welcome {
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 42rpx;
		margin-top: 27rpx;
	}

	.text {
		font-size: 24rpx;
		margin-top: 21rpx;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 24rpx;
		// background: linear-gradient(to right, #7B65FF 0%, #FF78A8 50%);
		background-color: #848686;
		;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.imgIcon {
		// text-align: center;
		width: 210rpx;
		height: 140rpx;
	}

	.btn-sub {
		margin-top: 85rpx;
		width: 640rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #039BDA, #0DF2ED);
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.contentList {
		width: 100%;
		padding-top: 38rpx;
	}
}
</style>